import React from'react';
import { Tabbar } from'react-vant';
import { FriendsO, HomeO, Search, SettingO, UserO } from '@react-vant/icons';
import { useNavigate, Outlet } from'react-router-dom';
import './Main.css';

export default function Main() {
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = React.useState<'home' | 'search' | 'style'  | 'login' | 'only'>('home');

  const handleTabChange = (tabName) => {
    setActiveTab(tabName);
    navigate(`/${tabName}`);
  };

  return (
    <div className="main-container">
      <div className="content-container">
        <Outlet />
      </div>
      <div className="tabbar-container">
        <Tabbar value={activeTab} onChange={handleTabChange}>
          <Tabbar.Item
            name="home"
            icon={<HomeO />}
            className={activeTab === 'home'? 'active-tab' : ''}
          >
            首页
          </Tabbar.Item>
          <Tabbar.Item
            name="search"
            icon={<Search />}
            className={activeTab === 'search'? 'active-tab' : ''}
          >
            搜索
          </Tabbar.Item>
          <Tabbar.Item
            name="style"
            icon={<FriendsO />}
            className={activeTab === 'style'? 'active-tab' : ''}
          >
            好友
          </Tabbar.Item>
          <Tabbar.Item
            name="login"
            icon={<UserO />}
            className={activeTab === 'login'? 'active-tab' : ''}
          >
            登录
          </Tabbar.Item>
              <Tabbar.Item
            name="only"
            icon={<UserO />}
            className={activeTab === 'only'? 'active-tab' : ''}
          >
            我的
          </Tabbar.Item>
        </Tabbar>
      </div>
    </div>
  );
}
    